<template>
  <div class="operating-button">
    <n-button type="primary">保存</n-button>
    <n-button type="primary" class="ml20" @click="printFun">打印</n-button>
    <n-button type="error" class="ml20">返回</n-button>
  </div>
  <div class="bgff pd pt20 mt20 product-page">
    <div class="title-label">上传产品</div>
    <n-form inline :label-width="120" label-placement="left" class="mt20">
      <n-grid x-gap="12" :cols="3">
        <n-form-item-gi label="产品名称：">
          <n-input placeholder="请输入产品名称" />
        </n-form-item-gi>
        <n-form-item-gi label="价格：">
          <n-input placeholder="请输入价格" />
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <n-form inline :label-width="120" label-placement="left">
      <n-grid x-gap="12" :cols="1">
        <n-form-item-gi label="产品简介：">
          <n-input
            type="textarea"
            placeholder="产品简介"
            class="product-Introduction"
          />
        </n-form-item-gi>
        <n-form-item-gi label="产品图片：">
          <div class="product-picture vertical-center">
            <i class="iconfont dx-24gl-pictures z9 fz40"></i>
          </div>
        </n-form-item-gi>
      </n-grid>
    </n-form>
    <div ref="QRCode" id="QRCode" class="QRCode">
      <img
        src="https://www.duxinggj.com/public/QRcode?text=产品的id为666666测试数据"
        style="width: 200px; hieght: 200px"
      />
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { ref, onMounted } from "vue";
import print from "../../util/print";
const QRCode = ref();
const printFun = () => {
  doPrint3();
};

const doPrint3 = (type?) => {
  //判断iframe是否存在，不存在则创建iframe
  var iframe = document.getElementById("print-iframe");
  if (!iframe) {
    var el = document.getElementById("QRCode");
    iframe = document.createElement("IFRAME");
    var doc = null;
    iframe.setAttribute("id", "print-iframe");
    iframe.setAttribute(
      "style",
      "position:absolute;width:0px;height:0px;left:-500px;top:-500px;"
    );
    document.body.appendChild(iframe);
    doc = iframe.contentWindow.document;
    //这里可以自定义样式
    doc.write(`<style>@page {
            size: auto;
            margin: 0cm;
        }</style>`);
    doc.write("<title>&nbsp;</title>");
    doc.write("<div>" + el.innerHTML + "</div>");
    doc.close();
    iframe.contentWindow.focus();
  }
  if (!type) {
    iframe.contentWindow.print();
  }

  if (navigator.userAgent.indexOf("MSIE") > 0) {
    document.body.removeChild(iframe);
  }
};
onMounted(() => {
  doPrint3(true);
});
</script>
 <style scoped>
.product-picture {
  width: 120px;
  height: 120px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
.product-page {
  min-height: 800px;
}
.product-Introduction {
  max-width: 1010px;
  height: 140px;
}
.QRCode {
  display: none;
}
</style>